import View360, { ControlBar } from "@site/src/components/View360";
import OptionDescriptor from "@site/src/components/OptionDescriptor";

<OptionDescriptor type="boolean | ControlBarItemOptions" defaultVal="true" added="4.0.0" />

Displays the fullscreen enter/exit button.
If `true`, it'll show the button & apply the default options.
If `false`, it won't display the button.
You can also set detailed options by setting a object of type [ControlBarItemOptions](/docs/api/Plugin/Interface/ControlBarItemOptions).

:::caution
In environments where fullscreen APIs are not supported, such as iOS, the fullscreen button won't be displayed.
In this case, you can use polyfills to to make the environment support Fullscreen API.
:::

## Example
Below is an example of not displaying a button.

<View360
  projectionOptions={{
    src: "/pano/equirect/burano.mp4",
    video: true
  }}
  showControlBar={{ fullscreenButton: false }}
  license="burano" />

```js
import { ControlBar } from "@egjs/view360";

new ControlBar({
  fullscreenButton: false
})
```

Below is an example of a button displaying in a different location.

<View360
  projectionOptions={{
    src: "/pano/equirect/burano.mp4",
    video: true
  }}
  showControlBar={{ fullscreenButton: {
    position: ControlBar.POSITION.TOP_RIGHT,
    order: 0
  } }}
  license="burano" />

```js
import { ControlBar } from "@egjs/view360";

new ControlBar({
  fullscreenButton: {
    position: ControlBar.POSITION.TOP_RIGHT,
    order: 0
  }
})
```
